<template>
  <el-container v-loading="data.loadings" class="checkout-container">
    <el-main class="main">
      <el-form ref="checkoutForm" label-width="120px" :inline="true">
        <el-form-item label="手机号">
          <el-input
            :disabled="!data.isBhj"
            v-model="data.productCode"
            :maxlength="11"
            placeholder="请输入商品编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="data.paymentMethod" placeholder="请选择支付方式" style="width: 240px">
            <el-option label="现金" value="cash"></el-option>
            <el-option label="微信支付" value="wxan"></el-option>
            <el-option label="支付宝" value="suvy"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品清单">
          <el-table :data="data.offihsdata.detailslist" border style="width: 600px; height: 200px">
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="unitprice" label="单价"></el-table-column>
            <el-table-column prop="cpunt" label="数量"> </el-table-column>
            <el-table-column prop="product" label="小计"> </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="会员">
          <el-switch v-model="data.isBhj" inline-prompt active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="总价">
          <el-tag :closable="false" color="success">{{
            parseFloat(data.offihsdata.amount).toFixed(2)
          }}</el-tag>
        </el-form-item>
        <el-form-item label="折扣">
          <el-tag :closable="false" color="success">{{
            data.dgvipdata?.foeverDiscount == undefined ? 0.0 : data.dgvipdata?.foeverDiscount ?? 1
          }}</el-tag>
        </el-form-item>
        <el-form-item label="应付金额">
          <el-tag :closable="false" color="danger">{{ parseFloat(data.zj).toFixed(2) }}</el-tag>
        </el-form-item>
      </el-form>
      <div style="float: right; margin-top: 20px">
        <el-button type="primary" @click="completePayment">完成支付</el-button>
      </div>
    </el-main>
  </el-container>
</template>
<script setup>
import { reactive, onMounted, watch, defineEmits } from "vue";
import { ElMessage } from "element-plus";
import { Get_sys_products, generate_Pay } from "@/api/offline";
import { Get_Vip_off } from "@/api/vip";
import { useRouter } from "vue-router";

const router = useRouter();
const emit = defineEmits(["myclose"]);

const data = reactive({
  isBhj: false,
  loadings: false,
  offihsdata: [],
  dgvipdata: [],
  productCode: "",
  paymentMethod: "",
  zj: 0,
});

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

// 完成支付
const completePayment = async () => {
  if (data.paymentMethod == "") {
    ElMessage.error("请选择支付方式");
    return;
  }
  const res = await generate_Pay({
    oid: data.offihsdata.Ordernumber,
    money: data.zj,
    payment: data.paymentMethod,
  });
  if (res.code === 0) {
    //现金提示
    if (res.message == "成功了") {
      ElMessage({
        message: "现金支付完成",
        type: "success",
      });
      setTimeout(() => {
        emit("myclose");
      }, 1000);
    }
    //微信支付提示
    if (res.message == "success!") {
      location.href = res.data.data;
    }
  }
};

//获取用户会员
const getvip = async () => {
  data.loadings = true;
  const res = await Get_Vip_off({ id: data.productCode });
  if (res.code === 0) {
    data.dgvipdata = res.data[0];
    data.zj = data.offihsdata.amount * (data.dgvipdata?.foeverDiscount ?? 1);
    ElMessage({
      message: "成功",
      type: "success",
    });
  } else {
    ElMessage.error("手机号错误");
  }
  data.loadings = false;
};

const bind = async () => {
  data.loadings = true;
  const res = await Get_sys_products({ id: props.data });
  if (res.code === 0) {
    data.offihsdata = res.data.data[0];
  }
  data.loadings = false;
};

onMounted(async () => {
  await bind();
  data.zj = data.offihsdata.amount;
});

// 监听数据变化
watch([() => data.productCode], async (newVal, oldVal) => {
  if (data.productCode.length == 11) {
    const res = await getvip();
  }
});
</script>
<style scoped>
.checkout-container {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #409eff;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.main {
  flex: 1;
  padding: 20px;
}
</style>
